<script setup>
    import {
        Management,
        Promotion,
        UserFilled,
        User,
        Crop,
        EditPen,
        SwitchButton,
        CaretBottom, Plus
    } from '@element-plus/icons-vue'
    import avatar from '@/assets/default.png'


    import {ElMessage, ElMessageBox} from 'element-plus'
    import {useRouter} from 'vue-router'

    const router = useRouter();
    import {useTokenStore} from '@/store/token.js'
    import adminApi from "@/api/admin.js";

    const tokenStore = useTokenStore()
    import {useAdminInfoStore} from '@/store/adminInfo.js'
    import {reactive, ref} from "vue";

    const adminInfoStore = useAdminInfoStore()

    //条目被点击后,调用的函数
    const handleCommand = (command) => {
        //判断指令
        if (command === 'logout') {
            //退出登录
            tokenStore.removeToken()
            adminInfoStore.removeAdminInfo()
            //跳转到登录界面
            router.push('/login')
        } else if (command === 'updateAdminInfo') {
            dialogUpdateAdminInfoVisible.value = true
            //admin.value = adminInfoStore.admin
            Object.assign(admin.value, adminInfoStore.admin)
        } else if (command === 'resetPassword') {
            dialogResetPasswordVisible.value = true
            adminPassword.value = {}
        } else {
            //路由
            router.push('/admin/' + command)
        }
    }


    const getAdminInfo = () => {
        adminApi.adminInfo().then(result => {
            if (result.code == 0) {
                adminInfoStore.setAdminInfo(result.data)
            }
        })
    }

    getAdminInfo()

    //修改个人信息
    const dialogUpdateAdminInfoVisible = ref(false)
    const admin = ref({})

    const headers = ref({
        //添加token
        Authorization: tokenStore.token
    })

    const handleAvatarSuccess = (result) => {
        admin.value.image = result.data
    }

    const updateAdminInfo = () => {
        adminApi.update(admin.value).then(result => {
            if (result.code === 0) {
                ElMessage({message: result.msg, type: 'success',})
                dialogUpdateAdminInfoVisible.value = false
                //重新加载最新数据
                getAdminInfo()
            } else {
                ElMessage.error(result.msg)
            }
        })
    }

    //重置密码
    const dialogResetPasswordVisible = ref(false)
    const adminPassword = ref({})
    const resetFormRef = ref()
    const rePasswordValid = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('Please input the password again'))
        } else if (value !== adminPassword.value.newPassword) {
            callback(new Error("Two inputs don't match!"))
        } else {
            callback()
        }
    }

    //表单正则表达式验证
    const rules = ref({
        oldPassword: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 16, message: '用户名的长度必须为5~16位', trigger: 'blur'}
        ],
        newPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 16, message: '密码长度必须为3~16位', trigger: 'blur'}
        ],
        reNewPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {validator: rePasswordValid, trigger: 'blur'}
        ]
    })

    const resetPassword = (formEl) => {
        if (!formEl) return
        formEl.validate((valid) => {
            if (valid) {
                adminApi.resetPassword(adminPassword.value).then(result => {
                    if (result.code === 0) {
                        ElMessage({message: result.msg, type: 'success',})
                        dialogResetPasswordVisible.value = false
                        //退出登录
                        tokenStore.removeToken()
                        adminInfoStore.removeAdminInfo()
                        //跳转到登录界面
                        router.push('/login')
                    } else {
                        ElMessage.error(result.msg)
                    }
                })
            } else {
                ElMessage.error('表单验证失败')
            }
        })
    }

</script>

<template>
	<!-- element-plus中的容器 -->
	<el-container class="layout-container">
		<!-- 左侧菜单 -->
		<el-aside width="200px">
			<div class="el-aside__logo"></div>
			<!-- element-plus的菜单标签 -->
			<el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff"
					 router>
				<el-menu-item index="/chart">
					<el-icon>
						<Management/>
					</el-icon>
					<span>统计图表</span>
				</el-menu-item>
				<el-menu-item index="/admin">
					<el-icon>
						<Management/>
					</el-icon>
					<span>管理员管理</span>
				</el-menu-item>
				<el-menu-item index="/blog">
					<el-icon>
						<Promotion/>
					</el-icon>
					<span>博客管理</span>
				</el-menu-item>
				<el-sub-menu>
					<template #title>
						<el-icon>
							<UserFilled/>
						</el-icon>
						<span>个人中心</span>
					</template>
					<el-menu-item index="/user/info">
						<el-icon>
							<User/>
						</el-icon>
						<span>基本资料</span>
					</el-menu-item>
					<el-menu-item index="/user/avatar">
						<el-icon>
							<Crop/>
						</el-icon>
						<span>更换头像</span>
					</el-menu-item>
					<el-menu-item index="/user/resetPassword">
						<el-icon>
							<EditPen/>
						</el-icon>
						<span>重置密码</span>
					</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</el-aside>
		<!-- 右侧主区域 -->
		<el-container>
			<!-- 头部区域 -->
			<el-header>
				<div><strong>思途后台管理系统{{ zhansgan }}</strong></div>
				<!-- 下拉菜单 -->
				<!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
				<el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="adminInfoStore.admin.image?adminInfoStore.admin.image:avatar"/>
                        <el-icon>
                            <CaretBottom/>
                        </el-icon>
                    </span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="updateAdminInfo" :icon="User">基本资料</el-dropdown-item>
							<el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
							<el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
							<el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</el-header>
			<!-- 中间区域 -->
			<el-main>
				<!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div> -->
				<router-view></router-view>
			</el-main>
			<!-- 底部区域 -->
			<el-footer>后台管理 ©2024 Created by Gao</el-footer>
		</el-container>
	</el-container>

	<el-dialog v-model="dialogUpdateAdminInfoVisible" title="修改基本信息" width="500" :lock-scroll="false">
		<el-form :model="admin">
			<el-form-item label="名字" :label-width="60">
				<el-input v-model="admin.name" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="邮箱" :label-width="60">
				<el-input v-model="admin.email" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="手机号" :label-width="60">
				<el-input v-model="admin.phone" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="头像" :label-width="60">
				<el-upload
						class="avatar-uploader"
						action="/api/upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:headers="headers"
				>
					<img v-if="admin.image" :src="admin.image" class="avatar"/>
					<el-icon v-else class="avatar-uploader-icon">
						<Plus/>
					</el-icon>
				</el-upload>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogUpdateAdminInfoVisible = false">取消</el-button>
				<el-button type="primary" @click="updateAdminInfo">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>

	<el-dialog v-model="dialogResetPasswordVisible" title="修改密码" width="500" :lock-scroll="false">
		<el-form ref="resetFormRef" :rules="rules" :model="adminPassword">
			<el-form-item prop="oldPassword" label="原密码" :label-width="100">
				<el-input v-model="adminPassword.oldPassword" autocomplete="off"/>
			</el-form-item>
			<el-form-item prop="newPassword" label="新密码" :label-width="100">
				<el-input v-model="adminPassword.newPassword" autocomplete="off"/>
			</el-form-item>
			<el-form-item prop="reNewPassword" label="重复新密码" :label-width="100">
				<el-input v-model="adminPassword.reNewPassword" autocomplete="off"/>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogResetPasswordVisible = false">取消</el-button>
				<el-button type="primary" @click="resetPassword(resetFormRef)">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>
    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .layout-container {
        height: 100vh;

        .el-aside {
            background-color: #232323;

            &__logo {
                height: 120px;
                background: url('@/assets/logo.png') no-repeat center / 120px auto;
            }

            .el-menu {
                border-right: none;
            }
        }

        .el-header {
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-dropdown__box {
                display: flex;
                align-items: center;

                .el-icon {
                    color: #999;
                    margin-left: 10px;
                }

                &:active,
                &:focus {
                    outline: none;
                }
            }
        }

        .el-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #666;
        }
    }
</style>